jQuery.fn.selectCity = function(targetId) {
    var _seft = this;
    var targetId = $(targetId);
    
    this.focus(function(){
        var A_top = $(this).offset().top + $(this).outerHeight(true);  //  1
        var A_left =  $(this).offset().left;
        targetId.bgiframe();
        targetId.show().css({
            "position":"absolute",
            "top":A_top+"px" ,
            "left":A_left+"px"
        });
    });

    targetId.find("#selectItemClose").click(function(){
        targetId.hide();
    });

    targetId.find("a").click(function(){
        setGameVal(_seft,this);
        targetId.hide();
    });

    $(document).click(function(event){
        if(event.target.id!=_seft.selector.substring(1)){
            targetId.hide();	
        }
    });

    targetId.click(function(e){
        e.stopPropagation(); //  2
    });

    return this;
}

function distinctList(inputArray){
    var i;
    var length = inputArray.length;
    var outputArray = [];
    var temp = {};
    for (i = 0; i < length; i++) {
        temp[inputArray[i]] = 0;
    }
    for (i in temp) {
        outputArray.push(i);
    }
    return outputArray;
}
function setFilter(d){
    classes = $("#"+d+" li").map(function(){
        return $(this).attr("class").split(' ');
    });
    // create list of distinct items only
    var classList = distinctList(classes);
    // generate the list of filter links
    var tagList = '<ul id="tag-list"></ul>';
    tagItem = '<li><a href="javascript:void(0)" rel="'+d+'"  onclick="doFilter(this)" class="active">all</a></li>';
    $.each(classList, function(index,value){
        var value = value.replace("-", " ");
        tagItem += '<li><a href="javascript:void(0)" rel="'+d+'" onclick="doFilter(this)">'+value+'</a></li>';
    });
    // add the filter links before the list of items
    if($("#tag-list")){
        $("#tag-list").remove();
    }
    $("#"+d).before($(tagList).append(tagItem));
}
function doFilter(obj){
    var d = $(obj).attr('rel');
    var getText = $(obj).text().replace(" ", "-");
    if(getText == 'all'){
        $("#"+d+" li").slideDown();
    } else {
        $("#"+d+" li").fadeOut();
        $("#"+d+" li."+getText).fadeIn();
    }	
    // add class "active" to current filter item
    $('#tag-list li a').removeClass('active');
    $(obj).addClass('active');
}